<template>
  <div class="inventory-list">
    <!-- 页面标题 -->
    <el-page-header content="库存清单" class="header"></el-page-header>

        <!-- 筛选区 -->
    <div class="filter-section">
      <el-form :inline="true" class="filter-form">
        <el-form-item label="商品名称">
          <el-input v-model="InventoryList.goods_Name" placeholder="请输入商品名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="商品品牌">
          <el-input v-model="InventoryList.goods_Brand" placeholder="请输入商品品牌" clearable></el-input>
        </el-form-item>
        <el-form-item label="库位编码">
          <el-input v-model="InventoryList.binL_Code" placeholder="请输入库位编码" clearable></el-input>
        </el-form-item>
        <el-form-item label="商品规格"> 
          <el-input v-model="InventoryList.goods_Spec" placeholder="请输入商品规格" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="InventoryListQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </div>


    <!-- 数据表格 -->
    <div class="table-section">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="goods_Name" label="商品名称"  />
        <el-table-column prop="goods_Spec" label="商品规格" />
        <el-table-column prop="goods_Brand" label="商品品牌" />
        <el-table-column prop="goods_Unit" label="商品单位" />
        <el-table-column prop="goods_WeightUnit" label="商品重量单位" />
        <el-table-column prop="binL_Code" label="库位编码" />
        <el-table-column prop="binL_Nums" label="库位数量" />
      </el-table>
      <el-pagination
      v-model:current-page="InventoryList.pageIndex"
      v-model:page-size="InventoryList.pageSize"
      :page-sizes="[10, 20, 30]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="InventoryList.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页" next-text="下一页"
    />
    </div>

  </div>
</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref, onMounted,reactive } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus' 


const tableData = ref([])
const InventoryList = reactive({
  goods_Name: '',
  goods_Brand: '',
  binL_Code: '',
  goods_Spec: '',
  totalCount: 0,
  totalPage: 0,
  pageIndex: 1,
  pageSize: 10,
})
//
onMounted(() => {
  InventoryListQuery()
})
//显示
const InventoryListQuery = () => {
  axios.get('http://localhost:5115/api/InventoryList/GetReport', {
    params: {
      goods_Name: InventoryList.goods_Name,
      goods_Brand: InventoryList.goods_Brand,
      binL_Code: InventoryList.binL_Code,
      goods_Spec: InventoryList.goods_Spec,

      pageIndex: InventoryList.pageIndex,
      pageSize: InventoryList.pageSize,
    }
  }).then(res => {
    tableData.value = res.data.data.data
    console.log(res)
    InventoryList.totalCount = res.data.data.totalCount
    InventoryList.totalPage = res.data.data.totalPage
  })
}



const handleSizeChange = (val: number) => {
  InventoryList.pageSize = val
  InventoryListQuery()
}
const handleCurrentChange = (val: number) => {
  InventoryList.pageIndex = val
  InventoryListQuery()
}
</script>

<style scoped>
.inventory-list {
  padding: 20px;
}
.header {
  margin-bottom: 20px;
}
.filter-section {
  margin-bottom: 20px;
  background: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #ebeef5;
}
.export-section {
  margin-top: 20px;
  text-align: right;
}
</style>
